<script setup lang="ts">
defineProps<{
}>()

import { watch } from 'vue';
import { computed, ref,onMounted  } from 'vue';

const checkedButtons = ref<number[]>([]);

function handleMouseDown(event:any){
	checkedButtons.value=[...checkedButtons.value,event.button];			
}

function handleMouseUp(event:any){
	checkedButtons.value = checkedButtons.value.filter(keyCode => keyCode !== event.button);
}

onMounted (function () {
	window.addEventListener('mousedown', handleMouseDown);
	window.addEventListener('mouseup', handleMouseUp);
})
watch(checkedButtons, (newValue, oldValue) => {
	// console.log(newValue);
})
</script>

<template>
  		<div class="mouse">
			<div class="body">
				<div class="buttons">
					<div :class="`left ${checkedButtons.includes(0) ? 'active' : ''}`"></div>
					<div :class="`wheel ${checkedButtons.includes(1) ? 'active' : ''}`"></div>
					<div :class="`right ${checkedButtons.includes(2) ? 'active' : ''}`"></div>
				</div>
				<div></div>
			</div>
		</div>
</template>

<style scoped>
		.mouse{
			--positionX:20%;
			--positionY:20%;
			margin-left: var(--positionX);
            margin-top: var(--positionY);
			transform-style: preserve-3d;
		}
		.mouse .body{
			width: 6em;
			height: 8em;
			background-color: #464545;
			border-radius: 2.5em 2.5em 3.5em 3.5em;
			box-shadow: -0.3em 0.3em 0.5em #000,
			inset 0.1em 0.1em 2em #000;
		}
		.mouse .body .buttons{
			display: flex;
		}
		.mouse .body .left{
			width: 2.2em;
			height: 3em;
			background-color: #646464;
			border-radius: 2em 0.1em 0.1em 0.1em;
			border: 0.1em solid  #fff;
			box-shadow: inset 0.1em 0.1em 0.8em #000;
/* 			
			left: 0.5em;
			top: 0.5em; */
		}
		.mouse .body .wheel{
			width: 1.7em;
			height: 2em;
			background-color: #646464;
			margin:0.1em;
			border: 0.1em solid  #fff;
			box-shadow: inset 0.1em 0.1em 0.3em #000, inset -0.1em -0.1em 0.3em #fff;
		}
		.mouse .body .right{
			width: 2.2em;
			height: 3em;
			background-color: #646464;
			border: 0.1em solid  #fff;
			border-radius: 0.1em 2em 0.1em 0.1em;
			box-shadow: inset 0.1em 0.1em 0.8em #000;
		}
		.mouse .active{
			background-color: #fff !important;
		}
		
</style>